import React from "react";
import { useAppDispatch, useAppSelector } from "../../store/hooks";
import { NavBar, Button, Flex } from "react-vant";
import { useNavigate } from "react-router-dom";
import { Address } from "../../components";
import { AddressState, deleteAddressActionCreator } from "../../store/user/userReducer";
import { Dialog } from "react-vant";
const Index: React.FC = () => {
  const addressList = useAppSelector((state) => state.user.addressList);
  const navigate = useNavigate();
	const dispatch = useAppDispatch()
  const deleteAddress = (v: AddressState) => {
    Dialog.confirm({
      title: "警告",
      message: "确认要删除吗?",
    })
      .then(() => {
				dispatch(deleteAddressActionCreator(v) as any)
      })
      .catch(() => {});
  };
  return (
    <div>
      <NavBar
        title="收货地址"
        onClickLeft={() => navigate(-1)}
        rightText="添加"
      ></NavBar>
      <div className="order-list">
        {addressList.map((v, i) => {
          return (
            <Address
              isDefault={i === 0}
              {...v}
              key={v.id}
              footer={
                <Flex>
                  <Flex.Item span={8}>
                    <Button block size="small" type="info">
                      编辑
                    </Button>
                  </Flex.Item>
                  <Flex.Item span={8}>
                    <Button
                      block
                      size="small"
                      type="danger"
                      onClick={() => deleteAddress(v)}
                    >
                      删除
                    </Button>
                  </Flex.Item>
                  <Flex.Item span={8}>
                    {i !== 0 && (
                      <Button block size="small" type="primary">
                        设置默认
                      </Button>
                    )}
                  </Flex.Item>
                </Flex>
              }
            ></Address>
          );
        })}
      </div>
    </div>
  );
};

export default Index;
